<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="header">
                    <div class="headerleft">在线教育管理后台</div>
                    <div class="headeright">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F18%2F20210718183516_c5a92.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684739565&t=c0483762fce51d2e2b737572c3c1da9e"
                            alt="">
                        张三
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo" router>
                        <el-menu-item index="/welcome">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>首页</span>
                            </template>
                        </el-menu-item>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item index="/ordering">订单查询</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>商品管理</span>
                            </template>
                            <el-menu-item index="1-1">商品管理</el-menu-item>
                            <el-menu-item index="1-1">专栏管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>题库管理</span>
                            </template>
                            <el-menu-item index="/first">题库管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>内容管理</span>
                            </template>
                            <el-menu-item index="1-1">课程管理</el-menu-item>
                            <el-menu-item index="1-1">视频管理</el-menu-item>
                            <el-menu-item index="1-1">直播管理</el-menu-item>
                            <el-menu-item index="1-1">知识点管理</el-menu-item>
                            <el-menu-item index="1-1">项目管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="6">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>学员管理</span>
                            </template>
                            <el-menu-item index="1-1">观看记录</el-menu-item>
                            <el-menu-item index="1-1">学员消息</el-menu-item>
                            <el-menu-item index="1-1">学员开课</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="7">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>师资管理</span>
                            </template>
                            <el-menu-item index="1-1">师资列表</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="8">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>消息管理</span>
                            </template>
                            <el-menu-item index="1-1">系统消息</el-menu-item>
                            <el-menu-item index="1-1">短信消息推送</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="9">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>广告管理</span>
                            </template>
                            <el-menu-item index="1-1">广告管理</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
</script>
<style scoped>
.common-layout {
    height: 97.8%;
}

.el-menu,
.el-container {
    height: 97.8% !important;
}

.headeright {
    display: flex;
    align-items: center;
}

.headeright img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.headerleft {
    font-size: 20px;
    font-weight: bold;
}

.header {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3778FF;
}

main {
    padding: 0 !important;
}
</style>